import TableHeader from "../../../../components/Xie/tableHeader";
// import TableFooter from "../../../../components/Xie/tableFooter";
import index from './index.scss'
import {
    Button, Divider, Space, Table, Tag, Avatar, Modal, Image
} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import AllData from '../../../../api/AllXie'
import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
const Graphic = () => {
    // h获取数据
    useEffect(() => {
        // console.log(1)
        // selectAllData()
    }, [])
    const selectAllData = () => {
        AllData.selectGraphic().then((res) => {
            console.log(res);
        })

    }
    // 表格内容
    // 列
    const columns = [
        {
            title: '课程信息',
            dataIndex: 'course',
            //   render: (text) => <a>{text}</a>,
            width: 260,
            render: (_, record) => {
                return <div>
                    <Image
                        width={40}
                        height={30}
                        src={record.Src}
                    />
                    <span className='coursetit'>{record.coursename}</span>
                </div>

            }
        },
        {
            title: '课程价格(元)',
            dataIndex: 'coursePrice',

        },
        {
            title: '订阅量',
            dataIndex: 'Subscription',

        },
        {
            title: '课程状态',
            dataIndex: 'courseStatue',

            render: (_, record) => {
                if (record.courseStatue == 1) {
                    return <Tag color="green">已上架</Tag>
                }
                if (record.courseStatue == 2) {
                    return <Tag color="red">已上架</Tag>
                }
                if (record.courseStatue == 3) {
                    return <Tag color="orange">待上架</Tag>
                }
            }
        },
        {
            title: '课程类型',
            dataIndex: 'courseType',

        },
        {
            title: '上架时间',
            dataIndex: 'Times',

        },
        {
            title: '排序号',
            dataIndex: 'numbers',

        },
        {
            title: '操作',
            dataIndex: 'action',

            render: (_, record) => (
                <Space size='middle'>
                    <a onClick={() => { editMsg(record) }}>编辑</a>
                    <a onClick={() => { showConfirm(record.id) }}>下架</a>
                    <a onClick={() => { delConfirm(record.id) }}>删除</a>
                </Space>
            )
        },
    ];
    //   表格数据
    const data = [
        {
            id: 1,
            Src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            coursename: '西班牙语0-B2高级直达',
            course: 'lalalalalal',
            coursePrice: 120.00,
            Subscription: 2000,
            courseStatue: 1,
            courseType: '单节课',
            Times: '2020/10/10 10:45',
            numbers: 10
        },
    ]
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };
    // 编辑下架删除相关操作
    //编辑
    const grapEdit = useNavigate()
    const editMsg = (value) => {
        console.log(value);
        // grapEdit('/home/course/testtime')
        grapEdit('/home/course/grapedit', { state: { value } })
    }
    // 新建相关操作
    const grapxinjian = useNavigate()
    const addgraphic = () => {
        grapxinjian('/home/course/graphicxinjian')
    }
    // 点击下架的时候所弹出的弹框
    const { confirm } = Modal;
    const showConfirm = (value) => {
        confirm({
            title: '下架课程',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要下架该课程么?',
            cancelText: '取消',
            okText: '确定',
            centered: true,
            onOk() {
                console.log('OK', value);
            },
        });
    };
    // 删除的时候所弹出的模态框

    const delConfirm = (value) => {
        confirm({
            title: '删除课程',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要删除该课程么?',
            cancelText: '取消',
            okText: '确定',
            centered: true,
            onOk() {
                console.log('OK', value);
            },
        });
    };
    // 页码
    const showTotal = (total) => `数量 ${total} 条`;

    //复选框
    const [selectionType, setSelectionType] = useState('checkbox');
    const fn = (value) => {
        console.log(value, 333333);
    }
    return <div style={index} className="graphicTable">
        <TableHeader titjump={'图文课程'} tit={'图文课程'} getfn={fn}></TableHeader>
        <div className="footer">
            <div className="tableTop clear">
                <span>课程列表</span>
                <div className='tableBtn'>
                    <Button type='primary' className='btn1' onClick={addgraphic}>新建</Button>
                    <Button>批量操作</Button>
                </div>
            </div>
            <div className='tablemid'>
                <Divider />
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    pagination={{
                        total: data.length,
                        showTotal: showTotal,
                        showSizeChanger: true,
                        showQuickJumper: true,
                    }}
                    columns={columns}
                    dataSource={data}
                    rowKey={(record) => record.id}
                />
            </div>

        </div>
    </div>


}

export default Graphic;